<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .product {
      background-color: orange;
    }
  </style>
</head>
<body>

  <div id="app">
    <!-- 1.内容一: -->
    <product-item></product-item>

    <!-- 2.内容二: -->
    <product-item></product-item>

    <!-- 3.内容三: -->
    <product-item></product-item>
  </div>


  <!-- 组件product-item的模板 -->
  <template id="item">
    <div class="product">
      <h2>我是商品</h2>
      <div>商品图片</div>
      <div>商品价格: <span>¥9.9</span></div>
      <p>商品描述信息, 9.9秒杀</p>
    </div>
  </template>
  
  <script src="../lib/vue.js"></script>
  <script>
    /*
      1.通过app.component(组件名称, 组件的对象)
      2.在App组件的模板中, 可以直接使用product-item的组件
    */

    // 1.组件: App组件(根组件)
    const App = {}

    // 2.创建app
    const app = Vue.createApp(App)

    // const productItem={
    //   template:`
    //     <div class="product">
    //       <h2>我是商品</h2>
    //       <div>商品图片</div>
    //       <div>商品价格: <span>¥9.9</span></div>
    //       <p>商品描述信息, 9.9秒杀</p>
    //     </div>`
    // }

    // 3.注册一个全局组件
    // product-item全局组件
    // 方式一：
    // app.component("product-item",productItem)
    // 方式二：
    app.component("product-item", {
      template: "#item"
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>